<template>
  <a-form-model
    ref="highForm"
    :model="form"
    :label-col="{ span: 4 }"
    :wrapper-col="{ span: 18 }"
  >
    <a-row :gutter="24" v-if="type == 'sessionMgt'">
      <a-col :span="8">
        <a-form-model-item label="所属届次" prop="strSId">
          <s-select
            v-model="form.strSId"
            :selectOption="strSIds"
            placeholder="--请选择所属届次--"
          ></s-select>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="是否连任" prop="isContinue">
          <a-radio-group
            :options="member.ifOptions"
            v-model="form.isContinue"
          />
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="是否常委" prop="isCommittee">
          <a-radio-group
            :options="member.ifOptions"
            v-model="form.isCommittee"
          />
        </a-form-model-item>
      </a-col>
    </a-row>
    <a-row :gutter="24">
      <a-col :span="8">
        <a-form-model-item label="界别" prop="strSector">
          <s-select
            v-model="form.strSector"
            :selectOption="strSectors"
            placeholder="--请选择界别--"
          ></s-select>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="党派" prop="strFaction">
          <s-select
            v-model="form.strFaction"
            :selectOption="strFactions"
            placeholder="--请选择党派--"
          ></s-select>
        </a-form-model-item>
      </a-col>
      <a-col :span="8" v-if="type == 'memberMgt'">
        <a-form-model-item label="性别" prop="strSex">
          <s-select
            v-model="form.strSex"
            :selectOption="member.sexType"
            placeholder="--请选择性别--"
          ></s-select>
        </a-form-model-item>
      </a-col>
      <a-col :span="8" v-if="type == 'sessionMgt'">
        <a-form-model-item label="状态" prop="memStatus">
          <s-select
            v-model="form.memStatus"
            :selectOption="member.memStatusType"
            placeholder="--请选择状态--"
          ></s-select>
        </a-form-model-item>
      </a-col>
    </a-row>
    <a-row :gutter="24" v-if="type == 'sessionMgt'">
      <a-col :span="8">
        <a-form-model-item label="所属编组" prop="strGroup">
          <s-select
            v-model="form.strGroup"
            :selectOption="strGroups"
            placeholder="--请选择编组--"
          ></s-select>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="届内机构" prop="strOrg">
          <s-select
            v-model="form.strOrg"
            :selectOption="strOrgs"
            placeholder="--请选择届内机构--"
          ></s-select>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="届内职务" prop="strDtuy">
          <s-select
            v-model="form.strDtuy"
            :selectOption="strDutys"
            placeholder="--请选择届内职务--"
          ></s-select>
        </a-form-model-item>
      </a-col>
    </a-row>
    <a-row :gutter="24">
      <a-col :span="8">
        <a-form-model-item label="民族" prop="strNation">
          <s-select
            v-model="form.strNation"
            :selectOption="strNations"
            placeholder="--请选择民族--"
          ></s-select>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="籍贯" prop="strJG">
          <s-select
            v-model="form.strJG"
            :selectOption="strJGs"
            placeholder="--请选择籍贯--"
          ></s-select>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="学历" prop="strFullEdu">
          <s-select
            v-model="form.strFullEdu"
            :selectOption="strFullEdus"
            placeholder="--请选择学历--"
          ></s-select>
        </a-form-model-item>
      </a-col>
    </a-row>
    <a-row :gutter="24">
      <a-col :span="8">
        <a-form-item label="职能标签" prop="strDutyTag">
          <s-select
            v-model="form.strDutyTag"
            :selectOption="dutyTags"
            placeholder="--请选择职能标签--"
          ></s-select>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="年龄段" prop="strAgeRange">
          <s-select
            v-model="form.strAgeRange"
            :selectOption="member.ageRangeType"
            placeholder="--请选择年龄段--"
          ></s-select>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="关键属性" prop="strFunction">
          <a-input
            v-model="form.strFunction"
            placeholder="姓名/用户名/手机号/工作单位"
          />
        </a-form-model-item>
      </a-col>
    </a-row>
    <div class="form-footer">
      <a-button type="primary" @click="onSearch"> 查询 </a-button>
      <a-button class="btn-reset" style="margin-left: 14px" @click="resetForm">
        重置
      </a-button>
    </div>
  </a-form-model>
</template>
<script>
import { member } from 'assets/js/select-option-list'
export default {
  props: {
    type: {
      type: String,
      default: 'memberMgt'
    }
  },
  data() {
    return {
      member,
      strSIds: [],
      strGroups: [],
      strOrgs: [],
      strDutys: [],

      strSectors: [],
      strFactions: [],
      strNations: [],
      strJGs: [],
      strFullEdus: [],
      dutyTags: [],
      form: {
        strSId: undefined,
        isContinue: '',
        isCommittee: '',
        memStatus: undefined,
        strGroup: undefined,
        strOrg: undefined,
        strDtuy: undefined,

        strSector: undefined,
        strFaction: undefined,
        strSex: undefined,
        strNation: undefined,
        strJG: undefined,
        strFullEdu: undefined,
        strDutyTag: undefined,
        strAgeRange: undefined,
        strFunction: ''
      }
    }
  },
  methods: {
    onSearch() {
      //格式化form数据
      for (let i in this.form) {
        if (undefined == this.form[i]) {
          delete this.form[i]
        }
      }
      this.$emit('search', this.form)
    },
    resetForm() {
      this.$refs.highForm.resetFields()
    }
  }
}
</script>
<style lang="less" scoped>
.form-footer {
  width: 100%;
  text-align: center;
}
/**form-item的重置样式 */
/deep/.ant-form-item {
  margin-bottom: 5px;
  color: #333;
}
/**select的重置样式 */
/deep/.ant-select-selection--single {
  height: 34px;
  border-radius: 2px;
}
/deep/.ant-select-selection__placeholder {
  color: #333;
}
/**input重置样式 */
/deep/.ant-input {
  border-radius: 2px;
  height: 34px;
}
input::-webkit-input-placeholder {
  /* placeholder颜色  */
  color: #9c9c9c;
}
</style>